<!DOCTYPE html>
<html>
   <head>
     <title>Astrium Mobile Application</title>
	 <meta charset="utf-8">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

	<script type="text/javascript">
		function timedRefresh(timeoutPeriod) {
		$.getJSON( "log.json", function( data ) {
		$.each( data, function( key, val ) {
		var tab = "<li data-theme='e' id='" + key + "'>" + val + "</li>"
		$(tab).appendTo("#liste");
		});
	});
	setTimeout("location.reload(true);",timeoutPeriod);
	}
      

	</script>
   </head>
   <body>

	<section id="page1" data-role="page">
		<header data-role="header" data-theme="e" data-position="fixed" >
			<h1>Astrium SCC Portail</h1>
			<h2>Monitoring...</h2>
			<a data-rel="back" data-icon="back">Back</a>
		</header>
		<div class="content" data-role="content">
		    <h2>Welcome to Monitoring...</h2>
			<div data-role="navbar" data-icon="bottom">
				<ul>
					<li><a  href="#page2" data-role="button" data-transition="slide">Log Monitoring</a></li>
					<li><a  href="#page3" data-role="button" data-transition="slide">FOP Viewer</a></li>
					<li><a  href="#page4" data-role="button" data-transition="slide">TM Viewer</a></li>
				</ul>
			</div>
		</div>
		<footer data-role="footer" data-theme="a" data-position="fixed" data-id="foot" >
			<div data-role="navbar" data-icon="bottom">
				<ul>
					<li><a  href="#page5" data-role="button" data-icon="star" data-transition="slide" data-transition="slide">Access Mobility</a></li>
					<li><a  href="#page6" data-role="button" data-icon="star" data-transition="slide" data-transition="slide">Operations</a></li>
					<li><a  class="ui-btn-active ui-state-persist" href="#page1" data-role="button" data-icon="grid" data-transition="slide">Monitoring</a></li>
				</ul>
			</div>
		</footer>
	</section>
	
	<section id="page2" data-role="page" onload="JavaScript:timedRefresh(10000);">
		<header data-role="header" data-theme="e" >
			<h1>Astrium SCC Portail</h1>
			<h2>Monitoring...</h2>
			<a data-rel="back" data-icon="back">Back</a>
		</header>
		<div class="content" data-role="content">
		    <h2>Welcome to Monitoring...</h2>
			<div data-role="navbar" data-icon="bottom">
				<ul>
					<li><a  href="#page4" data-role="button" data-transition="slide">Log Monitoring</a></li>
					<li><a  href="#page5" data-role="button" data-transition="slide">FOP Viewer</a></li>
					<li><a  href="#page6" data-role="button" data-transition="slide">TM Viewer</a></li>
				</ul>
			</div>
			<div data-role="content" >
				<ul data-role="listview" data-filter="true" id="liste">
				
				</ul>
			</div>
		</div>
		<footer data-role="footer" data-theme="a" data-position="fixed" data-id="foot" >
			<div data-role="navbar" data-icon="bottom">
				<ul>
					<li><a  href="#page5" data-role="button" data-icon="star" data-transition="slide" data-transition="slide">Access Mobility</a></li>
					<li><a  href="#page6" data-role="button" data-icon="star" data-transition="slide">Operations</a></li>
					<li><a  class="ui-btn-active ui-state-persist" href="#page1" data-role="button" data-icon="grid" data-transition="slide">Monitoring</a></li>
				</ul>
			</div>
		</footer>
	</section>
	
	
  </body>
</html>
